<template>
    <div class="gold-shop-wrap safe-area-bottom">
        <van-nav-bar title="精选好店" left-arrow fixed @click-left="onClickLeft" />
        <!-- 轮播区 -->
        <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="handleToParams(item)">
                <img class="banner-li" :src="item.image_url" alt="">
            </van-swipe-item>
        </van-swipe>

        <!-- 店铺列表 -->
        <div class="shop-box">
            <div>
                <van-tabs v-model="active" @change="activeChange">
                    <van-tab title="精选店铺"></van-tab>
                    <van-tab title="区域推荐商家"></van-tab>
                </van-tabs>
            </div>

            <van-list class="shop_list" v-if="active == 0" v-model="loadingPage" :finished="finished"
                :finished-text="list.length ? '没有更多了' : ''" @load="ajaxGoodList">

                <div v-if="finished && !list.length" class="empty-good">
                    <van-empty description="暂无店铺" />
                </div>

                <!-- 商品列表 -->
                <div v-for="(item, index) in list" :key="index" class="shop-li">
                    <div class="shop-top">
                        <div class="shop-info">
                            <img class="shop-info-log" :src="item.cover_url" alt="">
                            <div class="shop-info-name">
                                <div class="shop-name">{{ item.name }}</div>
                                <div class="shop-good-sale">月销{{ item.sales_volume | saleWordFilter }}</div>
                            </div>
                        </div>
                        <div @click="handleToShop(item)" class="shop-btn">进店</div>
                    </div>
                    <div class="good-scroll">
                        <div v-for="gItem in item.goods_list" :key="gItem.id" class="good-li"
                            @click="handleToItem(gItem)"
                            :style='"background: url(" + gItem.cover_url + ") no-repeat center"'>
                            <div class="good-li-price">¥{{ gItem.price }}</div>
                        </div>
                    </div>
                </div>

            </van-list>
            <div v-else>

                <div v-if="!cityLIst.length" class="empty-good">
                    <van-empty description="暂无推荐商家" />
                </div>

                <!-- 商品列表 -->
                <div v-for="(item, index) in cityLIst" :key="index" class="city_list" @click="handleToCity(item)">
                    <img style="width: 100%;" :src="item.cover_url" alt="">
                    <div class="city_name">
                        {{ item.name }}
                    </div>
                </div>
            </div>


        </div>


    </div>
</template>

<script>
import { CONFIG_DATA, SHOP_LIST, REGION_RECOMMEND_LIST } from '@/api/home';
import { bannerToParams } from '@/tool/methods';
export default {
    data() {
        return {
            bannerList: [],

            // 分页
            page: 1,
            pageSize: 20,
            list: [],
            loadingPage: false,
            finished: false,
            active: 0,
            cityLIst: []
        }
    },
    created() {
        this.getBanner();
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        // 轮播跳转
        handleToParams(item) {
            bannerToParams(item)
        },
        // 轮播图
        getBanner() {
            this.$http.get(CONFIG_DATA, {
                params: {
                    key: 'banner_jxhd'
                }
            })
                .then(res => {
                    const {
                        data
                    } = res;

                    this.bannerList = data || [];
                })

        },
        handleToCity(item){
            localStorage.setItem('cityInfo', JSON.stringify(item))
            this.$router.push({
                name: 'areaShop',
            })
        },
        handleToShop(item) {
            localStorage.setItem('shopInfoName', item.name)
            this.$router.push({
                name: 'shopInfo',
                query: {
                    shopId: item.id
                }
            })
        },
        handleToItem(item) {
            this.$router.push({
                name: 'good',
                query: {
                    id: item.id
                }
            })
        },
        activeChange() {
            this.page = 1;
            this.list = [];
            this.ajaxGoodList();
            if (this.active == 0) {

            } else {
                this.$http.get(REGION_RECOMMEND_LIST).then(res => {
                    this.cityLIst = res.data
                })
            }
        },
        // 列表请求
        ajaxGoodList() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            params['type'] = 1;
            this.$http.get(SHOP_LIST, {
                params
            })
                .then(res => {
                    const {
                        list
                    } = res.data;

                    if (list && list.length) {
                        this.page++;
                        this.list = this.list.concat(list);
                        // 加载状态结束
                        this.loadingPage = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        }
    }

}

</script>
<style lang="scss">
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background-color: #fff;
    box-sizing: border-box;

    .van-nav-bar .van-icon {
        color: #333333;
    }

    .van-nav-bar__arrow {
        font-size: 20px;
    }

    .my-swipe {
        width: 7.02rem;
        margin: auto;

        .banner-li {
            display: block;
            width: 7.02rem;
            height: 2.8rem;
        }
    }

    .shop-box {
        padding: 0 0.24rem;
    }

    .shop-title {
        position: relative;
        height: 0.44rem;
        line-height: 0.44rem;
        margin-top: 0.32rem;
        margin-bottom: 0.32rem;
        font-weight: 500;
        font-size: 0.32rem;
        color: #333333;

        .shop-title-tag {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 1.28rem;
            height: 0.14rem;
            background: linear-gradient(90deg, #FD1A1A 0%, rgba(231, 1, 1, 0) 100%);
        }
    }

    .shop-li {
        width: 7.02rem;
        height: 3.24rem;
        margin-bottom: 0.2rem;
        padding: 0.24rem 0 0.16rem 0.24rem;
        border-radius: 0.12rem;
        box-sizing: border-box;
        background-color: #F2F4F5;

        .shop-top {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .shop-info {
                display: flex;

                .shop-info-log {
                    width: 0.8rem;
                    height: 0.8rem;
                    margin-right: 0.16rem;
                }

                .shop-info-name {
                    height: 0.44rem;
                    line-height: 0.44rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    font-weight: 500;
                    color: #333333;
                }

                .shop-name {
                    max-width: 4rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }

                .shop-good-sale {
                    line-height: 0.28rem;
                    font-weight: 400;
                    font-size: 0.2rem;
                    color: #FE7900;
                }
            }
        }

        .shop-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.12rem;
            height: 0.48rem;
            margin-right: 0.32rem;
            font-size: 0.24rem;
            color: #F32A23;
            border-radius: 0.24rem;
            background: rgba(243, 42, 35, 0.1);
            border: 0.02rem solid #F32A23;
        }
    }

    .good-scroll {
        display: flex;
        flex-wrap: nowrap;
        margin-top: 0.16rem;
        overflow-y: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        &::-webkit-scrollbar-track {
            display: none;
        }

        &::-webkit-slider-thumb {
            display: none;
        }

        .good-li {
            position: relative;
            flex-shrink: 0;
            width: 1.88rem;
            height: 1.88rem;
            margin-right: 0.08rem;
            background: #fff;
            border-radius: 0.12rem;
            background-size: cover !important;

            &:last-child {
                margin-right: 0.24rem;
            }

            .good-li-price {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 0.36rem;
                width: 100%;
                padding-right: 0.12rem;
                font-weight: 500;
                font-size: 0.24rem;
                color: #fff;
                background-color: rgba(0, 0, 0, 0.4);
                border-radius: 0 0 0.12rem 0.12rem;
                box-sizing: border-box;
            }
        }
    }

    .empty-good {
        padding-top: 1rem;
    }

    .shop_list {
        margin: .2rem auto;
    }

    .city_list {
        width: 95%;
        margin: .2rem auto;
        position: relative;

        .city_name {
            width: 100%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(50%);
            /* 水平居中 + 垂直居中 */
            color: #fff;
            font-size: 0.40rem;
            bottom: 50%;
            /* 距底部50% */
            text-align: center;
            /* 文本居中对齐 */
        }

        img {
            margin-bottom: .12rem;
        }
    }
}
</style>